@import"../../assets/css/reset.css";
@import"../../assets/css/common.css";

//头部独立样式
header {
    border-bottom: 1px solid rgb(185, 207, 239);
    position: relative;
    background-color: #f1f1f1ff;

    .register {
        a {
            color: fff !important;
        }
    }

    nav {
        a {
            color: #000;
        }
    }

    .login {
        a {
            color: #000;
        }
    }
}

// <!-- 粒子插件 -->
.banner {
    background-color: #f1f1f1;
    height: 355px;
    position: relative;

    #mydiv canvas {
        z-index: 100 !important;
        position: absolute !important;
    }

    // // <!-- 粒子插件上面的布局内容 定位在粒子上正中间-->
    .banner-content {
        height: 270px;
        width: 1200px;
        z-index: 500;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;

        // 粒子插件上面左边盒子
        .banner-left {
            text-align: center;
            height: 270px;
            width: 270px;
            background-color: #fff;
            display: flex;
            flex-direction: column;

            div:nth-child(1) {
                width: 100%;
                height: 55%;
                position: relative;

                img {
                    width: 100px;
                }

            }

            div:nth-child(2) {
                position: relative;
                width: 100%;
                height: 45%;
                // background-color: rgb(50, 76, 52);
                align-items: center;
                justify-content: space-around;

                //下边三个小DIV
                div {
                    width: 90px;
                    height: 100%;
                    flex-direction: column;
                    justify-content: center;
                    display: flex;
                    width: 50px;
                    height: 120px;
                    align-items: center;

                    img {
                        margin-bottom: 20px;
                    }

                    p {
                        color: rgb(208, 208, 208);
                    }

                    img {
                        width: 25px;
                    }
                }
            }

        }

        // 粒子插件上面右边盒子
        .banner-reght {
            width: 850px;
            height: 100%;

            .banner-reght-titel {
                b {
                    font-size: 22px;
                    color: #555555;

                    span {
                        display: inline-block;
                        padding: 4px 8px;
                        font-size: 12px;
                        color: #00bdff;
                        border: 1px solid #00bdff;
                        border-color: #00bdff;
                        vertical-align: bottom;
                        margin-left: 10px;
                    }

                    span {
                        display: inline-block;
                        padding: 4px 8px;
                        font-size: 12px;
                        color: #00bdff;
                        border: 1px solid #00bdff;
                        border-color: #00bdff;
                        vertical-align: bottom;
                        margin-left: 10px;
                    }

                }
            }
        }

    }
}